<template>
  <div class="Terminal_box" ref="boxTheSize">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div class="tltle_box">
            <el-row :gutter="24" style="width: 100%;">
            <el-col :sm="24" :md="12" :lg="14">
            <div class="tltle_box_l">
              <div class="Material_r">
                  <el-row :gutter="24" style="width: 100%;margin:0">
            <el-col :sm="24" :md="16" :lg="16" style="display: flex; padding: 5px ;">
                <el-input placeholder="请输入关键字" v-model="inputText" @clear="seektableList" clearable style=" margin-right: 20px;"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seektableList">搜索</el-button>
                <el-button type="primary" icon="" v-if="Invoking.forFunctionCode('workDate:statisticsMediaWorkDate')" @click="startCount">开始统计</el-button>
            </el-col>
            <el-col :sm="24" :md="24" :lg="24" style="padding: 5px;display: flex;">
                <el-button class="refresh" @click="OpenAdvancedSearchDialog">高级搜索</el-button>
                <div class="refreshFor">
                  <el-tooltip
                    v-for="(item,key,index) in advancedSearchList"
                    placement="top"
                    :key="index"
                    v-if="item"
                  >
                    <div slot="content">{{item}}</div>
                    <el-tag closable @close="closableTag(key)">
                      <span class="refreshFor_li_text">{{item}}</span>
                    </el-tag>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
              </div>
            </div>
             </el-col>
            <el-col :sm="24" :md="12" :lg="10">
            <div class="tltle_box_r">
              <el-date-picker
                v-model="tiemValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                @change="seektableList"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
               </el-col>
            </el-row>
          </div>
          <div class="Terminal_table">
            <zycm-table
              class="el-table"
              @zyLoadData="loadData"
              zy-table-ref="media_group_statistical_table"
              :zy-table-data="tabledataList"
              zy-table-height="60vh"
            >
              <el-table-column label="终端名称" prop="clientName" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column label="统计时间" prop="logDate" width="140" show-overflow-tooltip></el-table-column>
              <el-table-column label="运行时长" prop="workTime" width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div
                    v-if="((scope.row.workTime/60)/60).toFixed(2)>1"
                  >{{scope.row.workTime?((scope.row.workTime/60)/60).toFixed(2)+'小时':scope.row.workTime+'小时'}}</div>
                  <div
                    v-else-if="(scope.row.workTime/60).toFixed(2)>1"
                  >{{scope.row.workTime?(scope.row.workTime/60).toFixed(2)+'分钟':scope.row.workTime+'分钟'}}</div>
                  <div v-else>{{scope.row.workTime+'秒'}}</div>
                </template>
              </el-table-column>
              <el-table-column label="该天最早日志时间" prop="startDate" width="140" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{scope.row.startDate | dateFormat}}</div>
                </template>
              </el-table-column>
              <el-table-column label="该天最晚日志时间" prop="endDate" width="140" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{scope.row.endDate | dateFormat}}</div>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" width="140" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{scope.row.createTime | dateFormat}}</div>
                </template>
              </el-table-column>
              <el-table-column label="正常开机" prop="normalOn" width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div v-show="scope.row.normalOn==0">未知</div>
                  <div v-show="scope.row.normalOn==1">正常</div>
                  <div v-show="scope.row.normalOn==2">不正常</div>
                </template>
              </el-table-column>
              <el-table-column label="正常关机" prop="normalOff" width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div v-show="scope.row.normalOff==0">未知</div>
                  <div v-show="scope.row.normalOff==1">正常</div>
                  <div v-show="scope.row.normalOff==2">不正常</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right"  width="100" >
                <template slot-scope="scope">
                  <el-button
                  type="primary"
                  :size="GlobalVar.sizeSet.btn"
                    @click="DetailsOfTheLog(scope.row)"
                    v-if="Invoking.forFunctionCode('playLog:selectPagePlayTimeDetail')"
                  >详情日志</el-button>
                </template>
              </el-table-column>
            </zycm-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 高级搜索 -->
    <el-dialog
      title="高级搜索"
      :visible.sync="AdvancedSearchDialog"
      width="575px"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="advanced">
            <div>
              <el-select placeholder="请选择状态类型" v-model="AdvancedSearch.StateTheType">
                <el-option label="请选择" value></el-option>
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
             <div>
              <el-select placeholder="请选择限定条件" v-model="AdvancedSearch.limitCondition">
                <!-- <el-option label="请选择" value></el-option> -->
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-input placeholder="请输入秒数" v-model="AdvancedSearch.seconds"></el-input>
            </div>
          </div>
          <span
            style="width: 100%;text-align: center;margin: 20px auto 0;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button style="background-color:#4d9ce0;color:#fff" @click="advancedTableList">查 询</el-button>
            <el-button @click="emptyAdvancedSearch">清 空</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 日志详情 -->
    <el-dialog
      :title="machineCode.clientName?machineCode.clientName+'--日志详情':'日志详情'"
      :visible.sync="LogDetails"
      width="750px"
      class="LogDetails"
      @close="closeLogDetails"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="LogDetails_soso">
            <el-select placeholder="请选择日志" style="width:75%" v-model="LogDetailsValue">
              <el-option label="全部日志" value="0"></el-option>
              <el-option label="离线日志" value="1"></el-option>
              <el-option label="LED更新失败" value="2"></el-option>
              <el-option label="下载日志" value="3"></el-option>
            </el-select>
            <el-button @click="changeLogDetails">查询</el-button>
          </div>
          <zycm-table
            @zyLoadData="loadData"
            zy-table-ref="media_group_statistical_log"
            :zy-table-data="tabledataList"
            zy-table-height="450px"
            zy-border
          >
            <el-table-column label="日志时间" prop="logTime" width="140" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{scope.row.logTime | dateFormat}}</div>
              </template>
            </el-table-column>
            <el-table-column label="级别" prop="logLevel" width="80" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-show="scope.row.logLevel==1">普通</div>
                <div v-show="scope.row.logLevel==2">错误异常</div>
                <div v-show="scope.row.logLevel==3">警告</div>
                <div v-show="scope.row.logLevel==20">LED信息</div>
                <div v-show="scope.row.logLevel==21">LED异常</div>
              </template>
            </el-table-column>
            <el-table-column label="日志信息" prop="logInfo" min-width="100" show-overflow-tooltip></el-table-column>
          </zycm-table>
        
          <span
            style="width: 100%;text-align: center;margin: 20px auto 0;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button style="background-color:#4d9ce0;color:#fff" @click="LogDetails=false">关 闭</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 数据备份 -->
    <el-dialog
      title="数据备份"
      :visible.sync="DataBackup"
      width="576px"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="form" label-width="120px">
            <el-form-item label="选择备份区间">
              <el-select placeholder="请选择日志">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span
            style="width: 100%;text-align: center;margin: 0 auto;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button style="background-color:#4d9ce0;color:#fff">开始备份</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      query1: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      AdvancedSearchDialog: false,
      LogDetails: false,
      DataBackup: false,
      // 搜索字段
      inputText: "",
      TerminalHeight: "",
      tableData: [],
      logDataList: [],
      options1: [
        {
          value: "1",
          label: "运行时长大于",
        },
        {
          value: "2",
          label: "运行时长小于",
        },
      ],
      options2: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "不正常",
        },
      ],
      tiemValue: [],
      // 高级搜索
      AdvancedSearch: {
        limitCondition: "",
        StateTheType: "",
        seconds: "",
      },
      advancedSearchList: {},
      machineCode: "",
      LogDetailsValue: "",
      thisFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
    };
  },

  created() {
    this.clientHeight();

    //this.tiemValue = this.zycmUtils.dateTimeArea(-1);
    var day1 = new Date();
    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
    var s1 =
      day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
    this.tiemValue.push(s1 + " 00:00:00", s1 + " 23:59:59");
   /*  this.tiemValue.push(
      this.dateFormat(new Date()).substring(0, 10) + " 00:00:00"
    );
    this.tiemValue.push(
      this.dateFormat(new Date()).substring(0, 10) + " 23:59:59"
    ); */
    
    // this.tableList();
    let fd = new FormData();
    fd.set("startDate", this.tiemValue[0]);
    fd.set("endDate", this.tiemValue[1]);
    this.currentTableLoad("media_group_statistical_table", true, fd);
  },
  watch: {
    tiemValue(value) {
      if (!value) {
        this.tiemValue = [];
        this.tiemValue.push(
          this.dateFormat(new Date()).substring(0, 10) + " 00:00:00"
        );
        this.tiemValue.push(
          this.dateFormat(new Date()).substring(0, 10) + " 23:59:59"
        );
        this.tableList();
      }
    },
  },
  methods: {
    OpenAdvancedSearchDialog() {
      var limitCondition = "";
      var StateTheType = "";
      this.options1.forEach((element) => {
        if (element.label == this.advancedSearchList.limitCondition) {
          limitCondition = element.value;
        }
      });
      this.options2.forEach((element) => {
        if (element.label == this.advancedSearchList.StateTheType) {
          StateTheType = element.value;
        }
      });
      if (this.advancedSearchList) {
        this.AdvancedSearch = {
          limitCondition:limitCondition|| "",
          StateTheType:StateTheType|| "",
          seconds: this.advancedSearchList.seconds || "",
        };
      }
      this.AdvancedSearchDialog = true;
    },
    //给子组件刷新用
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_statistical_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "workDate/selectPage",
          this.tablePageList[tableRef]
        );
      } else if (tableRef == "media_group_statistical_log") {
        res = await this.$http.post(
          "runLog/selectPage",
          this.tablePageList[tableRef]
        );
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },

    closeLogDetails() {
      this.query1.page = 1;
      this.query1.pageSize = this.GlobalVar.query.pageSize;
      this.LogDetailsValue = "";
    },
    seektableList() {
      this.tableList();
    },
    advancedTableList() {
      var limitCondition = "";
      var StateTheType = "";
      this.options1.forEach((element) => {
        if (element.value == this.AdvancedSearch.limitCondition) {
          limitCondition = element.label;
        }
      });
      this.options2.forEach((element) => {
        if (element.value == this.AdvancedSearch.StateTheType) {
          StateTheType = element.label;
        }
      });
      if(this.AdvancedSearch.seconds){
        if(!limitCondition){
           this.$message({
            type: "warning",
            message: "请选择限定条件",
          });
          return;
        }
        this.advancedSearchList = {
          StateTheType: StateTheType,
          limitCondition: limitCondition,
          seconds: this.AdvancedSearch.seconds,
        };
      }else{
        this.advancedSearchList = {
          StateTheType: StateTheType
        };
      }
      this.tableList();
    },
    closableTag(e) {
      for (const key in this.advancedSearchList) {
        if (e == key) {
          this.advancedSearchList[key] = "";
          this.AdvancedSearch[key] = "";
        }
      }
      this.tableList();
    },
    async tableList() {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.set("zycmToken", token);
      formData.set("startDate", this.tiemValue[0] ? this.tiemValue[0] : "");
      formData.set("clientName", this.inputText);
      formData.set("endDate", this.tiemValue[1] ? this.tiemValue[1] : "");
      formData.set("workTime", this.AdvancedSearch.seconds);
      formData.set("workTimeType", this.AdvancedSearch.limitCondition);
      formData.set("isNormal", this.AdvancedSearch.StateTheType);
      this.currentTableLoad("media_group_statistical_table", true, formData);
      this.AdvancedSearchDialog = false;
    },
    emptyAdvancedSearch() {
      this.AdvancedSearch.seconds = "";
      this.AdvancedSearch.limitCondition = "";
      this.AdvancedSearch.StateTheType = "";
      this.advancedSearchList={};
      this.inputText="";
      this.AdvancedSearchDialog = false;
      this.tableList();
    },
    // 点击详情日志
    async DetailsOfTheLog(e) {
      if (e) {
        this.machineCode = e;
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("machineCode", this.machineCode.machineCode);
      formData.append("logType", this.LogDetailsValue);
      formData.append(
        "startTime",
        this.$options.filters.dateFormat(this.machineCode.startDate)
      );
      formData.append(
        "endTime",
        this.$options.filters.dateFormat(this.machineCode.endDate)
      );
      this.currentTableLoad("media_group_statistical_log", true, formData);
      this.LogDetails = true;
    },
    clientHeight() {
      this.$nextTick(() => {
        this.TerminalHeight = this.$refs.boxTheSize.clientHeight - 95;
      });
    },
    // 转换时间
    dateFormat(time) {
      let date = new Date(time + 8 * 3600000);
      let str = date.toISOString().replace("T", " ");
      return str.substr(0, str.lastIndexOf("."));
    },
    changeLogDetails() {
      this.logDataList = [];
      this.DetailsOfTheLog();
    },
    startCount(){
      	//校验 选择的时间不能大于等于当天
        var dif = (this.zycmUtils.strToDate(this.tiemValue[1].split(' ')[0]+" 00:00:00")).getTime() - (this.zycmUtils.strToDate(this.zycmUtils.dateFormatYMD(new Date())+" 00:00:00")).getTime();
        if(dif >= 0){
           this.$message({
            type: "error",
            message: "只能选择今天之前的日期生成统计数据，因为今天及之后的运行日志不完整会统计有误！",
          });
        }else{
          this.$confirm('确认进行【'+this.tiemValue[0]+'】到【'+this.tiemValue[1]+'】的统计！?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let formData = new FormData();
            formData.append("startDate", this.tiemValue[0] ? this.tiemValue[0] : "");
            formData.append("endDate", this.tiemValue[0] ? this.tiemValue[1] : "");
            const { data: res } = await this.$http.post(
              "workDate/statisticsMediaWorkDate",
              formData
            );
            if (res.result === "success") {
              this.$message({
                type: 'success',
                message: '统计成功！'
              });
              this.tableList();
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
           
          }).catch(() => {
           /*  this.$message({
              type: 'info',
              message: '已取消删除'
            });     */      
          });
    
        }
    }
  },
};
</script>

<style lang="stylus" scoped>
/deep/.el-table::before {
  height: 0;
}
.Terminal_box {
  .auditOpinion {
    /deep/.el-form-item__label {
      line-height: 80px;
    }
    /deep/.el-form-item__label,
    /deep/.el-textarea__inner {
      height: 80px;
    }
  }
  .BgColor {
    background-color: #e4f2ff;
    height: 100%;
  }
  /deep/.has-gutter .el-checkbox {
    display: none;
  }
  .tltle_box {
    margin: 1.5% 0;
     padding: 1%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    // height: 100px;
    width: 98%;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 5px;
    .tltle_box_l {
      
      display: flex;
      .Material_r {
        display: flex;
        margin-right: 20px;
        /deep/.el-button {
          // margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
        .refresh {
          background-color: #fff;
          color: #2183d8;
        }
      }
    }
    .tltle_box_r {
      padding: 5px;
      //   height: 50px;
      /deep/.el-date-picker {
        margin-bottom: 10px;
      }
      .el-button {
        // float: right;
        vertical-align: middle;
        background-color: #f2faff;
        width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 20px;
        img {
          width: 26px;
          height: 26px;
        }
      }
    }
    /deep/.el-table th,
    .el-table tr {
      background-color: #fafafa;
    }
  }
  .Terminal_table {
    margin: 1.5% 0;
    width: 100%;
    background-color: #fff;
    border-top: 0.1px solid #fff;
    .el-table {
      margin: 0.5%;
      width: 98%;
      padding-bottom: 10px;
    }
  }
  .Terminal_tree {
    padding: 20px;
  }
  /deep/.el-tree {
    background-color: #e4f2ff;
  }
  .pagination {
    display: flex;
    height: 60px;
    justify-content: center;
  }
  /deep/.el-pager li,
  /deep/.el-pagination .btn-next,
  /deep/ .el-pagination .btn-prev {
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px;
    color: #333;
    padding: 0;
  }
  /deep/.el-pager li.active {
    background-color: #2183d8;
    color: #fff;
  }
  /deep/.el-pagination__sizes {
    padding-left: 20px;
  }
  .fold {
    display: flex;
    width: 100%;
  }
  .fold /deep/.el-form-item__label {
    color: #0095fb;
  }
  .fold /deep/.el-form-item {
    width: 25%;
  }
  /deep/.el-tabs--bottom /deep/.el-tabs__item.is-bottom:nth-child(2),
  /deep/.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  /deep/.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  /deep/.el-tabs__item {
    padding: 0 20px;
  }
  /deep/.el-tabs__active-bar {
    padding: 0 20px;
    left: -20px;
    color: #2183d8;
  }
  /deep/.el-table th,
  .el-table tr {
    background-color: #fafafa;
  }
}
.refreshFor {
  display: flex;
  margin: 0 10px;
  .el-tag {
    max-width: 120px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    margin-right: 10px;
    /deep/.el-icon-close {
      top: -15px;
    }
    .refreshFor_li_text {
      display: inline-block;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.LogDetails {
  /deep/.el-dialog__body {
    padding: 10px 20px;
  }
}
/deep/.el-dialog {
  .advanced {
    display: flex;
    justify-content: space-between;
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
  .LogDetails_soso {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    /deep/.el-button {
      border-radius: 0;
      background-color: #4d9ce0;
      color: #fff;
      padding: 12px 50px;
    }
  }
  .inputTransparent {
    /deep/.el-form-item__content {
      display: flex;
      // justify-content: space-around
      text-align: center;
    }
  }
  .first_box {
    height: 250px;
    width: 99%;
    border: 1px solid #eee;
  }
  .auditOpinion {
    /deep/.el-form-item__label {
      line-height: 120px;
    }
    /deep/.el-form-item__label,
    /deep/.el-textarea__inner {
      height: 120px;
    }
  }
  /deep/.el-tree {
    background-color: #fff;
    padding: 0 0 5% 10%;
  }
  .selectTerminal {
    /deep/.el-tree {
      background-color: #fff;
      padding: 0 0 5% 10%;
    }
  }
  /deep/.el-select {
    display: block;
  }
  /deep/.el-dialog__header {
    background-color: #efefef;
    padding: 0;
    line-height: 50px;
    padding-left: 20px;
    color: #333;
    font-size: 16px;
  }
  /deep/.el-form-item__label {
    background-color: #efefef;
    border-radius: 0;
    height: 40px;
    border: 1px solid #dcdfe6;
    border-right: none;
    box-sizing: border-box;
    text-align: center;
    padding-left: 10px;
  }
    /deep/.el-input__inner{
      width: 100%;
    }
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    border-radius: 0;
  }
  /deep/.el-button {
    padding: 12px 25px;
  }
  .opinion {
    /deep/.el-form-item__label {
      height: 80px;
      line-height: 80px;
    }
  }
}
</style>
